<template>
	<view class="v-video-container">
		<video
			:id="videoId"
			:src="videoContext.src"
			:poster="poster"
			:autoplay="autoplay"
			:controls="controls"
			:loop="loop"
			:muted="muted"
			:object-fit="objectFit"
			:class="videoClass"
			:style="videoStyle"
			@play="handlePlay"
			@pause="handlePause"
			@ended="handleEnded"
			@click="handleVideoClick"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			:error="handleError"
			style="width: 100%; height: 100%"
		></video>
		<!-- 加载插槽 -->
		<slot name="loading" v-if="isLoading" />

		<!-- 错误插槽 -->
		<slot name="error" v-if="isError" />

		<!-- 新增：暂停插槽（非 loading / 非 error / 已暂停 / 未结束） -->
		<slot name="paused" v-if="!isLoading && !isError && isPaused && !hasEnded" />
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue';

interface Props {
	src: string;
	poster?: string;
	autoplay?: boolean;
	controls?: boolean;
	loop?: boolean;
	muted?: boolean;
	objectFit?: string;
	width?: string;
	height?: string;
	videoClass?: string;
	videoStyle?: string;
}

const props = withDefaults(defineProps<Props>(), {
	poster: '',
	autoplay: false,
	controls: true,
	loop: false,
	muted: false,
	objectFit: 'contain',
	width: '100%',
	height: '100%',
	videoClass: '',
	videoStyle: ''
});

const emit = defineEmits(['play', 'pause', 'ended', 'error']);

const videoId = ref('video_' + Date.now());
const isLoading = ref(true);
const isError = ref(false);
const videoContext = reactive({
	src: props.src
});
const videoElement = ref(null);
const touchStartX = ref(0);
const touchStartTime = ref(0);
const isLongPress = ref(false);
const clickNumber = ref(0);
const isPaused = ref(true);
const hasEnded = ref(false);

onMounted(() => {
	videoElement.value = uni.createVideoContext(videoId.value);
});

watch(
	() => props.src,
	(newValue) => {
		isLoading.value = true;
		if (newValue) {
			videoContext.src = newValue;
		}
	},
	{ immediate: true }
);
watch(
	() => props.src,
	(newValue) => {
		isLoading.value = true;
		if (newValue) {
			videoContext.src = newValue;
		}
	},
	{ immediate: true }
);

const handlePlay = () => {
	isLoading.value = false;
	isError.value = false;
	isPaused.value = false;
	hasEnded.value = false;
	emit('play');
};

const handlePause = () => {
	isPaused.value = true;
	emit('pause');
};

const handleEnded = () => {
	hasEnded.value = true;
	isPaused.value = true;
	emit('ended');
};

const handleError = (event: Event) => {
	isLoading.value = false;
	isError.value = true;
	emit('error', event);
};

const handleVideoClick = () => {
	if (!props.controls && videoElement.value) {
		clickNumber.value++;
		if (clickNumber.value % 2 == 0) {
			videoElement.value.play();
		} else {
			videoElement.value.pause();
		}
	}
};

const handleTouchStart = (event) => {
	touchStartX.value = event.touches[0].clientX;
	touchStartTime.value = Date.now();
	setTimeout(() => {
		if (Date.now() - touchStartTime.value > 500 && !isLongPress.value) {
			isLongPress.value = true;
		}
	}, 500);
};

const handleTouchMove = (event) => {
	if (!props.controls && isLongPress.value && videoElement.value) {
		const touchMoveX = event.touches[0].clientX;
		const videoWidth = videoElement.value.videoWidth;
		const seekTime = videoElement.value.currentTime;
		const duration = videoElement.value.duration;
		const moveDistance = touchMoveX - touchStartX.value;
		const seekPercentage = moveDistance / videoWidth;
		const newTime = Math.max(0, Math.min(duration, seekTime + seekPercentage * duration));
		videoElement.value.currentTime = newTime;
	}
};

const handleTouchEnd = () => {
	isLongPress.value = false;
};
</script>

<style scoped>
.v-video-container {
	width: 100%;
	height: 100%;
}
</style>
